<template>
  <div class="login-container">
    <!-- 左侧图片区域 -->
    <div class="login-left">
      <img src="../assets/carousel2.jpg" alt="登录背景图">
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="login-right">
      <div class="login-form">
        <h2 class="title">系统登录</h2>

        <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
          <el-form-item prop="phone">
            <el-input v-model="loginForm.phone" prefix-icon="el-icon-user" placeholder="用户名">
            </el-input>
          </el-form-item>

          <el-form-item prop="pwd">
            <el-input v-model="loginForm.pwd" prefix-icon="el-icon-lock" type="password"
              show-password>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleLogin" :loading="loading">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loginForm: {
          phone: '',
          pwd: ''
        },
        loginRules: {
          phone: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          pwd: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              message: '密码长度不能少于6位',
              trigger: 'blur'
            }
          ]
        },
        loading: false
      }
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.login();
          }
        });
      },
      async login() {
        let { data, code, message } = await this.$api.student.login(this.loginForm);
        if (code == 0) {
          console.log("登陆成功");
        } else {
          console.log("登录失败，错误信息：", message);
        }
      }
    }
  }
</script>
<style>
.login-container {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  overflow: hidden;
}

.login-left {
  width: 50%;

  img {
    object-fit: cover;
  }
}

.login-right {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.login-form {
  width: 60%;

 .title {
    margin-bottom: 30px;
    text-align: center;
    color: #333;
  }

 .el-button {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }

 .login-right {
    width: 100%;
    padding: 20px;
  }
}
</style>